<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>登录/注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

	<!-- Animate.css -->
	<link rel="stylesheet" href="/static/css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="/static/css/icomoon.css">
	<!-- Themify Icons-->
	<link rel="stylesheet" href="/static/css/themify-icons.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="/static/css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="/static/css/magnific-popup.css">

	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="/static/css/owl.carousel.min.css">
	<link rel="stylesheet" href="/static/css/owl.theme.default.min.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="/static/css/style.css">

	<!-- Modernizr JS -->
	<script src="/static/js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="/static/js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>

	<div class="gtco-loader"></div>

	<div id="page">


	<div class="page-inner">


	<header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(/static/image/beij2.jpeg)">
		<div class="overlay"></div>
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12 col-md-offset-0 text-left">


					<div class="row row-mt-15em">
						<div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
							<span class="intro-text-small">Welcome to Splash</span>
							<h1>医药管理系统</h1>
                                <h3 style="position: absolute;left: 480px; top:50px;color: cyan">{{ hobby }}</h3>

						</div>
						<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
							<div class="form-wrap">
								<div class="tab">
									<ul class="tab-menu">

										<li class="active gtco-first"><a href="#" data-tab="signup">登录</a></li>
                                         <li class="gtco-second"><a href="#" data-tab="login">注册</a></li>

									</ul>
								<div class="tab-content">
										<div class="tab-content-inner active" data-content="signup">

											<form action="http://127.0.0.1:8000/login/" method="post">
												<div class="row form-group">
													<div class="col-md-12">
														<label for="username">用户名或手机号</label>
														<input type="text" class="form-control" id="username" name="username" required="required">
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														<label for="password">密码</label>
														<input type="password" class="form-control" id="password" name="password"required="required">
													</div>
												</div>
                                                <div style="float: left">
                                                    <label for="" style="font-size: 15px">请选择你的身份：</label>
                                                        </div>
                                                <div style="float: left">
                                                    <input type="radio" name="ID" value="agency" required="required"> 经办人
                                                </div>
                                                 <div >
                                                    <input type="radio" name="ID" value="purchaser" required="required"> 采购人
                                                </div>
                                                <div >
                                                    <input type="radio" name="ID" value="root" required="required"> 管理员
                                                </div>
												<div class="row form-group">
													<div class="col-md-12" style="text-align: center">
														<input type="submit" class="btn btn-primary" value="登录">
													</div>
												</div>
											</form>
										</div>

										<div class="tab-content-inner" data-content="login">
											<form action="http://127.0.0.1:8000/register/" method="post">
												<div class="row form-group">
													<div class="col-md-12">
														<label for="username">用户名</label>
														<input type="text" class="form-control" id="username" name="username"required="required">
													</div>
												</div>
                                                <div class="row form-group">
													<div class="col-md-12">
														<label for="phone">手机号</label>
														<input type="tel" class="form-control" id="phone" name="phone"required="required">
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														<label for="password">密码</label>
														<input type="password" class="form-control" id="password1" name="password"required="required">
													</div>
												</div>
												<div class="row form-group">
													<div class="col-md-12">
														<label for="password2">确认密码</label>
														<input type="password" class="form-control" id="password2" onkeyup="validate()" required="required"><span id="tishi"></span>
													</div>
												</div>
                                                <div style="float: left">
                                                    <label for="" style="font-size: 15px">请选择你的身份：</label>
                                                        </div>
                                                <div style="float: left">
                                                    <input type="radio" name="ID" value="agency" required="required"> 经办人
                                                </div>
                                                 <div >
                                                    <input type="radio" name="ID" value="purchaser" required="required"> 采购人
                                                </div>
												<div class="row form-group">
													<div class="col-md-12" style="text-align: center">
														<input type="submit"  id="submit" class="btn btn-primary" value="注册">
													</div>
												</div>
											</form>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>


				</div>
			</div>
		</div>
	</header>














	</div>

	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>

	<!-- jQuery -->
	<script src="/static/js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="/static/js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="/static/js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="/static/js/jquery.waypoints.min.js"></script>
	<!-- Carousel -->
	<script src="/static/js/owl.carousel.min.js"></script>
	<!-- countTo -->
	<script src="/static/js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="/static/js/jquery.magnific-popup.min.js"></script>
	<script src="/static/js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="/static/js/main.js"></script>

	</body>
</html>

<script>
function validate() {
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if(pw1 == pw2) {
document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
document.getElementById("submit").disabled = true;
}
}
</script>